<template>
  <div class="image-preview-container">
    <div class="preview-content">
      <!-- 图片展示区 -->
      <div class="image-section">
        <div class="image-container">
          <img 
            :src="image.fileUrl" 
            :alt="image.originalName"
            class="preview-image"
            @load="handleImageLoad"
          />
          
          <!-- 图片操作按钮 -->
          <div class="image-actions">
            <el-button 
              type="primary" 
              :icon="Download"
              @click="handleDownload"
            >
              下载原图
            </el-button>
            <el-button 
              type="success" 
              :icon="Edit"
              @click="handleGenerateText"
            >
              生成文案
            </el-button>
            <el-button 
              type="warning" 
              :icon="CopyDocument"
              @click="handleExpandImage"
            >
              图片扩展
            </el-button>
          </div>
        </div>
      </div>
      
      <!-- 信息展示区 -->
      <div class="info-section">
        <div class="info-header">
          <h2 class="image-title">{{ image.originalName }}</h2>
          <div class="ai-status" :class="getAiStatusClass(image.aiRecognitionStatus)">
            <el-icon><MagicStick /></el-icon>
            {{ getAiStatusText(image.aiRecognitionStatus) }}
          </div>
        </div>
        
        <!-- 基本信息 -->
        <div class="info-group">
          <h3 class="group-title">
            <el-icon><InfoFilled /></el-icon>
            基本信息
          </h3>
          <div class="info-grid">
            <div class="info-item">
              <span class="info-label">文件名:</span>
              <span class="info-value">{{ image.name }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">原始名称:</span>
              <span class="info-value">{{ image.originalName }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">文件大小:</span>
              <span class="info-value">{{ formatFileSize(image.fileSize) }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">图片尺寸:</span>
              <span class="info-value">{{ image.width }} × {{ image.height }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">文件格式:</span>
              <span class="info-value">{{ image.mimeType.split('/')[1].toUpperCase() }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">上传时间:</span>
              <span class="info-value">{{ formatDate(image.createdAt) }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">使用次数:</span>
              <span class="info-value">{{ image.usageCount }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">更新时间:</span>
              <span class="info-value">{{ formatDate(image.updatedAt) }}</span>
            </div>
          </div>
        </div>
        
        <!-- AI识别标签 -->
        <div class="info-group" v-if="image.tags && image.tags.length > 0">
          <h3 class="group-title">
            <el-icon><Collection /></el-icon>
            AI识别标签
          </h3>
          <div class="tags-container">
            <el-tag
              v-for="tag in image.tags"
              :key="tag"
              class="tag-item"
              @click="handleTagClick(tag)"
            >
              {{ tag }}
            </el-tag>
          </div>
        </div>
        
        <!-- 描述信息 -->
        <div class="info-group" v-if="image.description">
          <h3 class="group-title">
            <el-icon><Document /></el-icon>
            描述信息
          </h3>
          <div class="description-content">
            <p>{{ image.description }}</p>
          </div>
        </div>
        
        <!-- 生成内容统计 -->
        <div class="info-group">
          <h3 class="group-title">
            <el-icon><DataAnalysis /></el-icon>
            生成内容统计
          </h3>
          <div class="stats-grid">
            <div class="stat-card">
              <div class="stat-value">{{ image.textContentCount || 0 }}</div>
              <div class="stat-label">生成文案数</div>
            </div>
            <div class="stat-card">
              <div class="stat-value">{{ image.generatedImageCount || 0 }}</div>
              <div class="stat-label">扩展图片数</div>
            </div>
            <div class="stat-card">
              <div class="stat-value">{{ image.usageCount }}</div>
              <div class="stat-label">使用次数</div>
            </div>
          </div>
        </div>
        
        <!-- 相关操作 -->
        <div class="info-group">
          <h3 class="group-title">
            <el-icon><Operation /></el-icon>
            相关操作
          </h3>
          <div class="action-buttons">
            <el-button 
              type="primary" 
              :icon="Edit"
              @click="handleGenerateText"
            >
              生成文案
            </el-button>
            <el-button 
              type="success" 
              :icon="CopyDocument"
              @click="handleExpandImage"
            >
              图片扩展
            </el-button>
            <el-button 
              type="info" 
              :icon="Share"
              @click="handleShare"
            >
              分享图片
            </el-button>
            <el-button 
              type="warning" 
              :icon="EditPen"
              @click="handleEditInfo"
            >
              编辑信息
            </el-button>
            <el-button 
              type="danger" 
              :icon="Delete"
              @click="handleDelete"
            >
              删除图片
            </el-button>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 编辑信息对话框 -->
    <el-dialog
      v-model="editVisible"
      title="编辑图片信息"
      width="500px"
    >
      <el-form :model="editForm" label-width="80px">
        <el-form-item label="图片名称">
          <el-input v-model="editForm.name" />
        </el-form-item>
        <el-form-item label="描述信息">
          <el-input 
            v-model="editForm.description" 
            type="textarea" 
            :rows="4"
            placeholder="请输入图片描述..."
          />
        </el-form-item>
      </el-form>
      
      <template #footer>
        <el-button @click="editVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSaveEdit" :loading="saving">
          保存
        </el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import {
  Download, Edit, CopyDocument, MagicStick, InfoFilled, Collection,
  Document, DataAnalysis, Operation, Share, EditPen, Delete
} from '@element-plus/icons-vue'
import type { ImageModel } from '@/types'
import { formatFileSize, formatDate, downloadFile, copyToClipboard } from '@/utils'
import { imageApi } from '@/api/image'

interface Props {
  image: ImageModel
}

interface Emits {
  (e: 'generate-text', image: ImageModel): void
  (e: 'expand-image', image: ImageModel): void
  (e: 'delete', image: ImageModel): void
  (e: 'tag-click', tag: string): void
  (e: 'update', image: ImageModel): void
}

const props = defineProps<Props>()
const emit = defineEmits<Emits>()

// 响应式数据
const editVisible = ref(false)
const saving = ref(false)
const editForm = reactive({
  name: '',
  description: ''
})

// 方法
const handleImageLoad = () => {
  // 图片加载完成后的处理
}

const handleDownload = () => {
  downloadFile(props.image.fileUrl, props.image.originalName)
  ElMessage.success('开始下载图片')
}

const handleGenerateText = () => {
  emit('generate-text', props.image)
}

const handleExpandImage = () => {
  emit('expand-image', props.image)
}

const handleTagClick = (tag: string) => {
  emit('tag-click', tag)
}

const handleShare = async () => {
  try {
    const shareText = `图片: ${props.image.originalName}\n链接: ${props.image.fileUrl}`
    await copyToClipboard(shareText)
    ElMessage.success('图片链接已复制到剪贴板')
  } catch (error) {
    ElMessage.error('复制失败')
  }
}

const handleEditInfo = () => {
  editForm.name = props.image.name
  editForm.description = props.image.description || ''
  editVisible.value = true
}

const handleSaveEdit = async () => {
  try {
    saving.value = true
    
    const response = await imageApi.updateImage(props.image.id, {
      name: editForm.name,
      description: editForm.description
    })
    
    if (response.success && response.data) {
      ElMessage.success('保存成功')
      emit('update', response.data)
      editVisible.value = false
    }
  } catch (error) {
    console.error('保存失败:', error)
    ElMessage.error('保存失败')
  } finally {
    saving.value = false
  }
}

const handleDelete = () => {
  emit('delete', props.image)
}

const getAiStatusClass = (status: string) => {
  switch (status) {
    case 'SUCCESS': return 'status-success'
    case 'FAILED': return 'status-failed'
    default: return 'status-pending'
  }
}

const getAiStatusText = (status: string) => {
  switch (status) {
    case 'SUCCESS': return 'AI识别成功'
    case 'FAILED': return 'AI识别失败'
    default: return 'AI识别中'
  }
}
</script>

<style scoped>
.image-preview-container {
  color: #333;
}

.preview-content {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 30px;
  min-height: 500px;
}

/* 图片展示区样式 */
.image-section {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.image-container {
  position: relative;
  max-width: 100%;
  text-align: center;
}

.preview-image {
  max-width: 100%;
  max-height: 600px;
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.image-actions {
  margin-top: 20px;
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

/* 信息展示区样式 */
.info-section {
  background: #f8f9fa;
  border-radius: 10px;
  padding: 20px;
  height: fit-content;
}

.info-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #e9ecef;
}

.image-title {
  font-size: 18px;
  font-weight: 600;
  margin: 0;
  flex: 1;
  margin-right: 15px;
  word-break: break-all;
}

.ai-status {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}

.status-success {
  background-color: rgba(103, 194, 58, 0.1);
  color: #67c23a;
}

.status-failed {
  background-color: rgba(245, 108, 108, 0.1);
  color: #f56c6c;
}

.status-pending {
  background-color: rgba(230, 162, 60, 0.1);
  color: #e6a23c;
}

.info-group {
  margin-bottom: 25px;
}

.group-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #333;
  margin: 0 0 15px 0;
}

.info-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.info-item {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid #f0f0f0;
}

.info-label {
  font-weight: 500;
  color: #666;
  min-width: 80px;
}

.info-value {
  color: #333;
  text-align: right;
  word-break: break-all;
}

.tags-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tag-item {
  cursor: pointer;
  transition: all 0.2s ease;
}

.tag-item:hover {
  transform: scale(1.05);
}

.description-content {
  background: white;
  border-radius: 5px;
  padding: 15px;
  border: 1px solid #e9ecef;
}

.description-content p {
  margin: 0;
  line-height: 1.6;
  color: #666;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
}

.stat-card {
  background: white;
  border-radius: 8px;
  padding: 15px;
  text-align: center;
  border: 1px solid #e9ecef;
}

.stat-value {
  font-size: 20px;
  font-weight: 600;
  color: #409EFF;
}

.stat-label {
  font-size: 12px;
  color: #666;
  margin-top: 5px;
}

.action-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.action-buttons .el-button {
  justify-content: flex-start;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .preview-content {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .info-header {
    flex-direction: column;
    gap: 15px;
  }
  
  .image-title {
    margin-right: 0;
  }
  
  .stats-grid {
    grid-template-columns: 1fr;
  }
  
  .image-actions {
    flex-direction: column;
  }
}
</style>